#@adminLayout()
#define main()
<div class="jbolt_page" data-key="/demo/fileuploader" >
<div class="jbolt_page_title">
	<h1>文件上传演示</h1>
</div>
<div class="jbolt_page_content">

<div class="row">

<div class="col-12">
<div class="card">
<div class="card-header">单文件上传</div>
<div class="card-body">
<div class="alert alert-primary">
注意：上传组件需要放在form表单外面，不随表单提交文件数据，上传组件选择文件后会显示名称，并且自动ajax上传文件后返回地址，
然后需要设置到一个隐藏域里就可以了。具体请看fileuploader.html
</div>
<!-- 示例代码 -->
<form onsubmit="return FormChecker.check(this);"  id="fileuploaderForm" action="demo/fileuploader/submit" method="post">
	<input type="text" data-rule="required" readonly="readonly" data-tips="请在下方选择文件上传" name="fileUploaderDemo" id="fileUploaderDemo" value="#(fileUploadDemo??)" class="form-control"/>
	<small class="text-danger">这里需要实际项目中做成隐藏域</small>
	<br/>
	<button  type="submit" class="btn btn-primary"><i class="fa fa-check mr-1">提交表单</i></button>
</form>
<fieldset class="form-page-fieldset">
<legend>上传文件-单文件</legend>
#if(msg)
<div class="alert alert-danger">
#(msg??)
</div>
#end
<div class="form-group">
    <label for="inputId">文件名</label>
    <input type="text" readonly="readonly" autocomplete="off" class="form-control" id="fileNameInput" aria-describedby="smallId" placeholder="用来显示文件名" />
</div>
<div class="form-group">
    <label for="inputId">文件大小</label>
    <input type="text" readonly="readonly" autocomplete="off" class="form-control" id="fileSizeInput"  aria-describedby="smallId" placeholder="用来显示文件大小" />
</div>


<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-maxsize="20480"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	></div>
	</div>
<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-btn-class="btn btn-primary"
	data-maxsize="20480"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	data-upload-success-callback="(alert('data-upload-success-callback'))"
	></div>
	</div>
<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-btn-class="btn btn-dark"
	data-placeholder="上传一个pdf"
	data-accept="pdf"
	data-maxsize="20480"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	></div>
</div>
<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-btn-class="btn btn-success"
	data-placeholder="上传一个Excel"
	data-accept="excel"
	data-maxsize="20480"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	></div>
</div>

<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-btn-class="btn btn-secondary btn-sm"
	data-maxsize="20480"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	></div>
</div>

<div class="form-group text-center">
	<div class="j_upload_file_box" 
	data-name="file" 
	data-btn-class="btn btn-info btn-lg"
	data-maxsize="20480"
	data-placeholder="上传一个mp4"
	data-accept="mp4"
	data-handler="uploadFile"
	data-url="demo/fileuploader/uploadFile"
	data-hiddeninput="fileUploaderDemo"
	data-filenameinput="fileNameInput"
	data-sizeinput="fileSizeInput"
	></div>
	</div>
</fieldset>
	
</div>
</div>
</div>
 
</div>
</div>
</div>
#end

#define js()
<script>

$(function(){
})
</script>
#end
